const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TsLoaderPlugin = require('ts-loader')
const webpack = require('webpack'); // 访问内置的插件

const path = require('path');

// 执行一下命令 或者配置到npm中去
// npx webpack --mode production 

module.exports = {
  mode: 'development', // 或 'production' 根据需要调整
  entry: {
    main : './webpack/index.js', // 入口文件  main就是chunk
  },
  output: {
    filename: '[name].[contenthash].js', // 输出的文件名  [chunkhash:5]
    path: path.resolve(__dirname, 'dist'), // 输出路径
    clean: true, // 每次构建清理 dist 目录
    assetModuleFilename: 'image/[name][ext]', //图片的
    publicPath: '/' ,
  },
  module: {
    rules: [
      {
        test: /\.(png|jpg|jpeg|svg|ico)$/i, // 处理图片资源
        type: 'asset/resource', // 将图片打包为单独的文件
      },
      {
        test: /\.scss$/, // 处理 SCSS 文件
        include: path.resolve(__dirname, 'scss'),
        use: [
            MiniCssExtractPlugin.loader, // 替代 style-loader，将 CSS 提取成单独文件
            'css-loader', 
            'sass-loader'],
      },
      {
        test: /\.ts?$/, // 处理 TypeScript 文件
        include: path.resolve(__dirname, 'ts'),
        use: {
          loader: 'ts-loader',
          options: {
            transpileOnly: true,
          },
        },
      },
      {
        test: /\.js$/, // 处理 JS 文件
        include: path.resolve(__dirname, 'babel'),
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
      {
        test: /\.css$/, // 使用 PostCSS 处理 CSS
        include: path.resolve(__dirname, 'postcss'),
        use: [
            MiniCssExtractPlugin.loader, // 替代 style-loader，将 CSS 提取成单独文件
            'css-loader',
              'postcss-loader'],
      },
    ],
  },
  plugins:[
    new webpack.ProgressPlugin(),
    new HtmlWebpackPlugin({   // 生成多个页面，配置多个HtmlPlugin就行了， 只要更改chunk
      
        template: './scss/index.html', // 指定 HTML 模板
        filename: 'index.html', // 输出的 HTML 文件名
        favicon: './image/favicon.ico', // 指定 favicon 文件
        chunks:'all'  //默认值为all， 可以指定需要那个js文件，使用chunk名称 ["main"]

      }),
      new MiniCssExtractPlugin({
        filename: '[name].[contenthash].css', // 输出的 CSS 文件名
      }),
    new TsLoaderPlugin(),
  ],
  optimization: {
    splitChunks: {
      chunks: 'all', // 拆分公共依赖包
    },

  },
  devServer: {
    static: path.resolve(__dirname, 'dist'), // 本地开发服务器的静态文件目录
    port: 3000, // 本地服务器端口
    open: true, // 自动打开浏览器
  },
  devtool: 'source-map'
};
